import { Suspense } from 'react';
import {
    generateStructuredData,
    generateBreadcrumbs,
    generateCanonicalUrl,
} from '@/lib/seo-config';
import { DefaultThumbnail, LiveIcon, ViewersIcon, GamepadIcon, UserIcon } from '@/components/icons';
import VideoPlayerWrapper from '@/components/VideoPlayerWrapper';

// 生成动态元数据
export async function generateMetadata({ params }) {
    // 在实际应用中，这里应该从 API 获取直播信息
    const streamData = {
        id: params.id,
        title: '示例直播标题',
        streamer: '主播名称',
        description: '这里是直播间的简介内容，主播可以在这里介绍一下自己的直播内容和特色。',
        viewers: '10.5K',
        category: '游戏',
        startTime: new Date().toISOString(),
        thumbnail: `https://your-domain.com/streams/${params.id}/thumbnail.jpg`,
        streamUrl: `https://your-domain.com/streams/${params.id}/index.m3u8`, // HLS 流地址
    };

    const structuredData = generateStructuredData('LiveStream', streamData);

    return {
        title: `${streamData.title} - ${streamData.streamer}的直播间`,
        description: streamData.description,
        keywords: `${streamData.streamer},${streamData.category},直播,在线直播,游戏直播`,
        openGraph: {
            title: `${streamData.title} - ${streamData.streamer}的直播间`,
            description: streamData.description,
            type: 'website',
            videos: [
                {
                    url: streamData.streamUrl,
                    type: 'application/x-mpegURL',
                },
            ],
        },
        alternates: {
            canonical: generateCanonicalUrl(`/stream/${params.id}`),
        },
        other: {
            'og:video:tag': streamData.category,
            'og:video:duration': '0',
            'og:video:release_date': streamData.startTime,
        },
        structured: structuredData,
    };
}

// 生成静态参数（用于热门直播的 SSG）
export async function generateStaticParams() {
    // 这里应该从 API 获取热门直播列表
    const streams = [{ id: '1' }, { id: '2' }, { id: '3' }];

    return streams.map(stream => ({
        id: stream.id,
    }));
}

// 设置 ISR，每分钟重新验证一次
export const revalidate = 60;

// 面包屑导航组件
function Breadcrumbs({ path }) {
    const breadcrumbs = generateBreadcrumbs(path);
    return (
        <nav className="flex mb-4" aria-label="Breadcrumb">
            <ol className="flex items-center space-x-2">
                {breadcrumbs.map((crumb, index) => (
                    <li key={crumb.url} className="flex items-center">
                        {index > 0 && <span className="mx-2 text-gray-400">/</span>}
                        <a href={crumb.url} className="text-sm text-gray-400 hover:text-white">
                            {crumb.name}
                        </a>
                    </li>
                ))}
            </ol>
        </nav>
    );
}

export default function StreamPage({ params }) {
    // 在实际应用中，这里应该从 API 获取直播信息
    const streamData = {
        id: params.id,
        title: '示例直播标题',
        streamer: '主播名称',
        description: '这里是直播间的简介内容，主播可以在这里介绍一下自己的直播内容和特色。',
        viewers: '10.5K',
        category: '游戏',
        startTime: new Date().toISOString(),
        streamUrl: `https://your-domain.com/streams/${params.id}/index.m3u8`, // HLS 流地址
    };

    return (
        <div className="min-h-screen bg-gray-900">
            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
                <Breadcrumbs path={`/stream/${params.id}`} />
                <div className="grid grid-cols-1 lg:grid-cols-[1fr_400px] gap-8">
                    {/* Main Content */}
                    <div className="space-y-6">
                        {/* Video Player */}
                        <Suspense
                            fallback={
                                <div className="aspect-video bg-gray-800 rounded-lg animate-pulse" />
                            }
                        >
                            <VideoPlayerWrapper
                                url={streamData.streamUrl}
                                title={streamData.title}
                                isLive={true}
                            />
                        </Suspense>

                        {/* Stream Info */}
                        <div className="bg-gray-800 rounded-lg p-6">
                            <div className="flex items-start justify-between">
                                <div>
                                    <h1 className="text-2xl font-bold text-white">
                                        {streamData.title}
                                    </h1>
                                    <div className="mt-2 flex items-center space-x-4">
                                        <div className="flex items-center space-x-2">
                                            <div className="h-10 w-10 rounded-full bg-gray-700">
                                                <UserIcon className="w-10 h-10 text-gray-500" />
                                            </div>
                                            <div>
                                                <p className="text-white font-medium">
                                                    {streamData.streamer}
                                                </p>
                                                <p className="text-sm text-gray-400">120万 粉丝</p>
                                            </div>
                                        </div>
                                        <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
                                            关注
                                        </button>
                                    </div>
                                </div>
                                <div className="flex items-center space-x-2">
                                    <div className="bg-red-500/10 text-red-500 rounded-md px-2.5 py-1.5 text-sm font-medium flex items-center space-x-1">
                                        <LiveIcon className="w-4 h-4" />
                                        <span>直播中</span>
                                    </div>
                                    <div className="text-white flex items-center space-x-1">
                                        <ViewersIcon className="w-4 h-4 text-gray-400" />
                                        <span className="font-medium">{streamData.viewers}</span>
                                        <span className="text-gray-400 ml-1">观众</span>
                                    </div>
                                </div>
                            </div>

                            <div className="mt-6">
                                <h2 className="text-lg font-medium text-white mb-2">直播简介</h2>
                                <p className="text-gray-300">{streamData.description}</p>
                                <div className="mt-4 flex items-center space-x-4">
                                    <div className="flex items-center space-x-2">
                                        <GamepadIcon className="w-8 h-8 text-gray-400" />
                                        <span className="text-white">{streamData.category}</span>
                                    </div>
                                    <span className="text-gray-400">•</span>
                                    <span className="text-gray-400">开播 2 小时</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Chat */}
                    <div className="bg-gray-800 rounded-lg flex flex-col h-[calc(100vh-8rem)]">
                        <div className="p-4 border-b border-gray-700">
                            <h2 className="text-lg font-medium text-white">直播间聊天</h2>
                        </div>

                        <div className="flex-1 overflow-y-auto p-4 space-y-4">
                            {/* Chat Messages */}
                            {[1, 2, 3, 4, 5].map(item => (
                                <div key={item} className="flex items-start space-x-3">
                                    <div className="flex-shrink-0">
                                        <div className="h-8 w-8 rounded-full bg-gray-700">
                                            <UserIcon className="w-8 h-8 text-gray-500" />
                                        </div>
                                    </div>
                                    <div>
                                        <p className="text-sm">
                                            <span className="font-medium text-indigo-400">
                                                用户{item}
                                            </span>
                                            <span className="text-gray-300 ml-2">
                                                这是一条聊天消息 {item}
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            ))}
                        </div>

                        <div className="p-4 border-t border-gray-700">
                            <div className="flex space-x-2">
                                <input
                                    type="text"
                                    placeholder="发送消息"
                                    className="flex-1 bg-gray-700 text-white rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                />
                                <button className="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                                    发送
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
